<template>
  <navbar title="参赛选手信息" :isBack="true" :border="true"></navbar>
  <loading v-if="!formList.length"></loading>
  <template v-else>
    <view class="content" :style="{ minHeight: tools.clientTopHight() }">
      <customForm ref="formRef" bg="#fff" v-if="formList.length" :formList="formList" @change="formChange"></customForm>
    </view>
    <view class="bottom flex">
      <view class="btn" @click="tools.navTo('', 2)">取消</view>
      <view class="btn" @click="formRef.reset()">重置</view>
      <view class="btn" @click="formRef.confirm()">保存</view>
    </view>
  </template>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import tools from '@/utils/tools'
import customForm from '@/components/form/custom.vue'
import userPinia from '@/store/user'
const user = userPinia()
// 获取组件实例
const formRef = ref(null)
let formList = ref([])

// 表单参数回调
const formChange = (e: { value }) => {
  user.$state.formList = e.value
  tools.navTo('', 2)
}

onLoad((option) => {
  formList.value = JSON.parse(option.form)
})
</script>

<style>
page {
  background-color: #f9f9f9;
}
</style>
<style lang="scss" scoped>
.bottom {
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  background: #fff;
  padding: 26rpx 26rpx 60rpx 26rpx;
  .btn {
    width: 200rpx;
    height: 84rpx;
    font-size: 32rpx;
    text-align: center;
    line-height: 84rpx;
    border-radius: 6rpx;
    margin-right: 46rpx;
    &:nth-child(1) {
      color: #666666;
      background-color: #f9f9f9;
    }
    &:nth-child(2) {
      color: #e6425e;
      border: 1px solid #e6425e;
    }
    &:nth-child(3) {
      color: #fff;
      margin-right: 0;
      background-color: #e6425e;
    }
  }
}
</style>
